<template>
	<div>
		<el-card shadow="never">
			<div style="text-align: left;">
				<el-date-picker class="x_soso" v-model="valueDate" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
				 start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
				<!-- <el-date-picker class="x_soso" v-model="search.payBTime" type="date" value-format="yyyy-MM-dd" placeholder="起始时间"></el-date-picker>
				<el-date-picker class="x_soso" v-model="search.EndTime" type="date" value-format="yyyy-MM-dd" placeholder="结束时间"></el-date-picker> -->
				<el-input class="x_soso" v-model="search.searchInput" placeholder="请输入代理商名称/手机号搜索"></el-input>
				<el-button type="primary" @click="searchList">查询</el-button>

			</div>
			<div style="text-align: left;">
				<el-button type="primary" @click="refushData">刷新</el-button>
			</div>
			<div style="clear:both"></div>
			<el-table v-loading="loading" :data="tableData" style="width: 100%;margin-top: 20px">
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column label="代理商头像" align="center" width="150" prop="ageImg">
					<template slot-scope="scope">
						<img :src="scope.row.ageImg" alt="" />
					</template>
				</el-table-column>
				<el-table-column label="代理商姓名" align="center" width="150" prop="ageName"></el-table-column>
				<el-table-column label="手机号" align="center" width="150" prop="agePhone"></el-table-column>
				<el-table-column label="详细地址" align="center" width="150" prop="addessDetail"></el-table-column>
				<el-table-column label="运营商名称 " align="center" width="150" prop="schemeName"></el-table-column>
				<el-table-column label="审核状态" align="center" width="150" prop="applyStatus">
					<template slot-scope="scope">
						<span v-if="scope.row.applyStatus == 1">申请审核中</span>
						<span v-if="scope.row.applyStatus == 2">审核通过</span>
						<span v-if="scope.row.applyStatus == 3">拒绝</span>
					</template>
				</el-table-column>
				<el-table-column label="审核结论" align="center" width="150" prop="auditResult"></el-table-column>
				<el-table-column label="创建时间" align="center" width="180" prop="createTime"></el-table-column>
				<el-table-column fixed="right" label="操作" align="center">
					<template slot-scope="scope">
						<el-button @click="showDialog(scope.row)" icon="el-icon-edit" type="warning" size="small">审核</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div style="margin-top: 20px;text-align: right">
				<el-pagination background @current-change="columnFind" :current-page="page.page" :page-size="page.pagesize" layout="prev, pager, next, jumper, total"
				 :total="page.count"></el-pagination>
			</div>
		</el-card>
		<el-dialog title :visible.sync="dialogCheck" width="500px" :close-on-click-modal="false">

			<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="审核状态">
					<el-select filterable v-model="checkStuates" style="width: 90%;" placeholder="选择审核状态">
						<el-option v-for="(item, index) in checkStuatesList" :key="index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="原因">
					<el-input type='textarea' v-model="checkResult" maxlength="100" placeholder="请输入原因"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogCheck = false">取 消</el-button>
				<el-button type="primary" @click="checkedData()">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		ageApplyList,editManagerage
	} from '../../../server/index';
import Cookie from 'js-cookie';
	export default {
		inject: ['reload'],
		data() {
			return {
				valueDate: [],
				loading: true,
				tableData: [1],
				search: {},
				searchInput: '',
				page: {
					count: 0,
					pagesize: 10,
					page: 1
				},
				rankList: [],
				dialogCheck: false,
				ruleForm: {},
				checkStuates: '',
				checkResult: '',
				checkStuatesList: [{
					id: '2',
					name: '通过'
				}, {
					id: '3',
					name: '拒绝'
				}],
				ageId: '',
				agreeCheck: '',
			};
		},
		mounted() {
			var page = 1;
			this.columnFind(page);
			Cookie.remove('tabList');
		},
		methods: {
			searchList() {
				this.columnFind(1);
			},
			// 刷新
			refushData() {
				this.reload();
			},
			columnFind(page) {
				const _this = this;
				_this.page.page = page;
				let startTime = _this.valueDate[0];
				let endTime = _this.valueDate[1];
				let obj = {
					page: _this.page.page,
					rows: _this.page.pagesize,
					startCreateTime: undefined == startTime ? '' : startTime,
					endCreateTime: undefined == endTime ? '' : endTime,
					keyword: undefined == _this.search.searchInput ? '' : _this.search.searchInput
				};
				_this.http.request({
					url: ageApplyList,
					data: obj,
					success: function(res) {
						_this.loading = false;
						_this.tableData = res.list;
						_this.page.count = res.total;
					},
					error: function(err) {
						_this.$message({
							offset: '200',
							message: err.msg
						})
					}
				});
			},
			showDialog(row) {
				const _this = this;
				_this.agreeCheck = row.applyStatus;
				if (_this.agreeCheck != '1') {
					_this.$message({
						offset: '500',
						message: '此数据已经审核，不能再进行操作'
					})
					return;
				}
				_this.dialogCheck = true;
				_this.ageId = row.ageId;
			},
			checkedData() {
				const _this = this;
				if (!_this.checkStuates) {
					_this.$message({
						offset: '200',
						message: '请选择审核状态'
					})
					return;
				}
				if (!_this.checkResult) {
					_this.$message({
						offset: '200',
						message: '请输入原因'
					})
					return;
				}
				let dataMsg = {
					ageId: _this.ageId,
					applyStatus: _this.checkStuates,
					auditResult: _this.checkResult
				};
				_this.http.request({
					url: editManagerage,
					data: dataMsg,
					success: function() {
						_this.dialogCheck = false;
						_this.reload();
					},
					/* error: function(err) {
						_this.$message({
							offset: '200px',
							message: err.msg
						})
					} */
				});
			}
		}
	};
</script>

<style scoped="scoped" lang="less">
	.el-button--primary {
		background: rgba(113, 106, 202, 1);
		border: none;
	}

	.el-button--primary:hover {
		color: #606266;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(113, 106, 202, 1);
	}

	.el-button--warning {
		color: #FFF;
		background-color: #F4516C;
		border-color: #F4516C;
	}
</style>
